<template>
    <div class="index-banner" :style="indexBannerStyle">
        <div class="wrapper">
            <div class="ban">
                <div class="ban-img">
                    <a href="#">
                        <img :src="carouselPics[currentCarouselIndex].imgUrl" :style="imgStyle">
                    </a>
                </div>

                <a href="javascript:void(0)" class="btnl" @click="changeCarousel('left')"></a>
                <a href="javascript:void(0)" class="btnr" @click="changeCarousel('right')"></a>

                <div class="dots">
                    <a v-for="(_, index) in carouselPics.length" :class="currentCarouselIndex == index ? 'active-dot-pg': ''" href="#" class="dot-pg"
                        @click="changeCarousel(index)"></a>
                </div>

                <div class="download">
                    <router-link class="download-btn" to="/download">
                        下载客户端
                    </router-link>
                    <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
                    <span class="shadow"></span>
                    <span class="shadowr"></span>
                </div>

            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import carouselPics from '@/json_data/carousel_pics.json'
 



let index = 0;
const imgUrl = ref(carouselPics[0].imgUrl);
const currentCarouselIndex = ref(0);
const imgStyle = reactive({
    opacity: 1
})



const indexBannerStyle = reactive({
    backgroundImage: `url(${carouselPics[0].imgBgUrl})`,
    backgroundPosition: 'center center',
    backgroundSize: '6000px'
})

let global_timer;

onMounted(()=>{
    global_timer = setInterval(() => {
    imgStyle.opacity = 1;
    currentCarouselIndex.value = currentCarouselIndex.value >= carouselPics.length - 1 ? 0 : currentCarouselIndex.value + 1;

    setTimeout(() => {
        imgStyle.opacity = 0.2

    }, 5000)

}, 6000)
})

const changeCarouselWrapper = () => {
    imgStyle.opacity = 1;
    let timer = null;
    let timer2 = null;
   return  (index) => {
        if(global_timer){
            clearInterval(global_timer);
            global_timer = null;
            
        }
        clearInterval(timer);
        clearInterval(timer2);
        
        timer = setInterval(() => {
       
            imgStyle.opacity = 1;
            currentCarouselIndex.value = currentCarouselIndex.value >= carouselPics.length - 1 ? 0 : currentCarouselIndex.value + 1;

        }, 7500)

        timer2 = setInterval(() => {
                imgStyle.opacity = 0.2
            }, 7000)
       if(index == 'right'){
             currentCarouselIndex.value = currentCarouselIndex.value >= carouselPics.length - 1 ? 0 : currentCarouselIndex.value + 1;
       }else if(index == 'left'){
            currentCarouselIndex.value = currentCarouselIndex.value <= 0 ? carouselPics[carouselPics.length - 1].imgUrl : currentCarouselIndex.value - 1;
       }else{
        currentCarouselIndex.value = index;
       }
        



    }
}

const changeCarousel = changeCarouselWrapper();




watch(() => currentCarouselIndex.value, () => {
    indexBannerStyle.backgroundImage = `url(${carouselPics[currentCarouselIndex.value].imgBgUrl})`;
})








</script>

<style lang="scss" scoped>
.index-banner {
    height: 285px;

    .wrapper {
        width: 982px;
        height: 100%;

        margin: 0 auto;

        .ban {
            position: relative;
            height: 100%;

            .ban-img {

                width: 100%;
                height: 100%;

                img {
                    transition: opacity 1s ease 0s;
                    width: 730px;
                }
            }

            .btnl {
                left: -68px;
                background-position: 0 -360px;

                &:hover {
                    background-position: 0 -430px;
                }
            }

            .btnr {
                right: -68px;
                background-position: 0 -508px;

                &:hover {
                    background-position: 0 -578px;
                }
            }

            .btnl,
            .btnr {
                position: absolute;
                top: 50%;
                margin-top: -31px;
                width: 37px;
                height: 63px;
            }



            .dots {
                position: absolute;
                top: 259px;
                left: 0;
                width: 730px;
                height: 20px;
                text-align: center;

                .dot-pg {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    background-position: 3px -343px;
                }

                .active-dot-pg {
                    background-position: -16px -343px;

                }
            }

            .download {

                width: 254px;
                height: 285px;
                position: absolute;
                top: 0;
                right: -1px;
                // z-index: 20;
                background-position: 0 0;

                .download-btn {
                    display: block;
                    width: 215px;
                    height: 56px;
                    margin: 186px 0 0 19px;
                    background-position: 0 9999px;
                    text-indent: -9999px;

                    &:hover {
                        background-position: 0 -290px;
                    }


                }

                p {
                    color: #8d8d8d;
                    text-align: center;
                    margin: 10px auto;
                    z-index: 80;
                }

                .shadow,
                .shadowr {
                    position: absolute;
                    display: block;
                    top: 0;
                    left: -20px;
                    width: 20px;
                    height: 285px;
                    background-position: -1px 0;
                }

                .shadowr {
                    left: auto;
                    right: -20px;
                    background-position: -20px 0px;
                }
            }
        }


    }


}
</style>